<template>
<!-- 点餐-蚂蚁上树-确认订单-选择地址-新增地址 -->
  <div>
    <van-nav-bar
      class="orderhead"
      title="添加地址"
      left-arrow
      @click-left="onClickLeft"
    />
    <div class="address">
      <div class="address-user">
        <label>联系人</label>
        <input type="text" placeholder="你的名字" />
        <div>
          <van-radio-group v-model="radio">
            <van-radio name="1">先生</van-radio>
            <van-radio name="2">女士</van-radio>
          </van-radio-group>
        </div>
      </div>
      <div class="address-phone">
        <label>联系电话</label>
        <input type="text" placeholder="你的手机号" />
      </div>
      <div class="address-user">
        <label>联系人</label>
        <div>
          <input type="text" placeholder="地址" />
          <!-- <div id="cell">
            <van-cell is-link @click="showPopup"  >展示弹出层</van-cell>
            <van-popup v-model="show" position="bottom" get-container="#cell">
                <van-area title="标题" :area-list="areaList" />
            </van-popup>
          </div> -->
          <div><input type="text" placeholder="详细地址" /></div>
        </div>
      </div>
      <div class="address-phone">
        <label>标签</label>
        <van-tag plain type="primary">无</van-tag>
        <van-tag plain type="primary">家</van-tag>
        <van-tag plain type="primary">学校</van-tag>
        <van-tag plain type="primary">公司</van-tag>
      </div>
    </div>
  </div>
</template>

<script>
import { AddressEdit, Toast, RadioGroup, Radio, Tag, Area, NavBar } from "vant";
import { areaList } from "@vant/area-data";
// import OrderHead from "../way/OrderHead.vue";
export default {
  name: "AddAddress",
  components: {
    // OrderHead,
    [AddressEdit.name]: AddressEdit,
    [RadioGroup.name]: RadioGroup,
    [Radio.name]: Radio,
    [Tag.name]: Tag,
    [Area.name]: Area,
    [NavBar.name]: NavBar,
  },
  data() {
    return {
      searchResult: [],
      radio: "1",
      areaList,
      show: false,
    };
  },
  methods: {
    onClickLeft() {
      Toast("返回");
    },
    onSave() {
      Toast("save");
    },
    onDelete() {
      Toast("delete");
    },
    onChangeDetail(val) {
      if (val) {
        this.searchResult = [
          {
            name: "黄龙万科中心",
            address: "杭州市西湖区",
          },
        ];
      } else {
        this.searchResult = [];
      }
    },
  },
  showPopup() {
    this.show = true;
  },
};
</script>

<style lang="less" scoped>
.orderhead {
  background-color: #3190e8;
  color: white;
  font-size: 20px;
}
.address-user {
    div{
        display: flex;
        justify-content: center;
    }
}
input{

}
</style>